{% extends "背景板.html" %}

{% block sidebar %}
<li><a href="{{url_for('products.products')}}">商品管理</a></li>
<li><a href="{{url_for('member.members')}}">会员管理</a></li>
<li><a href="{{url_for('sale.saleorders')}}">销售管理</a></li>
<li><a href="{{url_for('purchase_orders.purchase_orders')}}">采购管理</a></li>
<li><a href="{{url_for('sale.display_analysis')}}">统计分析</a></li>
{% endblock %}

{% block main %}
<style>
  /* 样式表 */
  table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
  }

  th,
  td {
    text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
  }

  .manage-button,
  .delete-button {
    padding: 5px 10px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 4px;
  }

  .manage-button {
    background-color: #00bfff;
  }

  .delete-button {
    background-color: #ffb6c1;
  }

  .buttons {
    display: inline-flex;
  }

  /* 模态框样式 */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
  }

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  /* 输入框样式 */
  input[type="text"],
  select,
  textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }

  input[type="submit"] {
    background-color: #00bfff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  input[type="submit"]:hover {
    background-color: #0080ff;
  }

  .product-info {
    font-size: 1.2em;
    margin-bottom: 10px;
  }

  .search-box {
    margin-bottom: 10px;
  }

  .search-box input {
    width: 300px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .search-box button {
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
<div class="sales-order-info">
    <h1>销售订单管理</h1>
    <!-- 搜索框 -->
    <div class="search-box">
        <input type="text" id="search-text" placeholder="请输入关键字...">
        <button onclick="searchProducts()">搜索</button>
    </div>
    <!-- 新增销售订单 -->
    <button onclick="saleorders_add()">新增销售订单</button>
</div>
<!-- 销售订单列表 -->
<div class="table-container" style="height: 500px; overflow: auto;">
    <table>
        <tr>
            <th>订单编号</th>
            <th>会员姓名</th>
            <th>销售时间</th>
            <th>总金额</th>
            <th>操作</th>
        </tr>
        {% for sales_order in sales_orders %}
        <tr>
            <td>{{ sales_order.id }}</td>
            <td>{{ sales_order.member_name }}</td>
            <td>{{ sales_order.time }}</td>
            <td>{{ sales_order.total_amount}}</td>
            <td>
                <div class="buttons">
                    <button class="manage-button" onclick="shoppingcart_display('{{ sales_order.id }}')">查看详情</button>
                    <button class="delete-button" onclick="openModal('delete-modal-{{ sales_order.id }}')">删除</button>
                </div>
            </td>
        </tr>
        <!-- 删除模态框 -->
        <div class="modal" id="delete-modal-{{ sales_order.id }}">
            <div class="modal-content">
                <span class="close" onclick="closeModal('delete-modal-{{ sales_order.id }}')">×</span>
                <h2>删除销售订单</h2>
                <p>确认要删除该销售订单吗？</p>
                <form action="{{ url_for('sale.delete_sales_order') }}" method="POST">
                    <input  name="sales_order_id" type="hidden" value="{{ sales_order.id }}">
                    <input type="submit" value="确认">
                </form>
            </div>
        </div>
        {% endfor %}
    </table>
</div>

<script>
    // 搜索销售订单
    function searchSalesOrders() {
        var searchText = document.getElementById('search-text').value;
        // 执行搜索操作...
    }

    // 打开模态框
    function openModal(modalId) {
        var modal = document.getElementById(modalId);
        modal.style.display = "block";
    }

    // 关闭模态框
    function closeModal(modalId) {
        var modal = document.getElementById(modalId);
        modal.style.display = "none";
    }
    function saleorders_add() {
  window.location.href = "{{url_for('sale.shoppingcart')}}";
}
    function shoppingcart_display(sales_order_id) {
  window.location.href = "/sale/shoppingcart/display/"+sales_order_id;
}
    function searchProducts() {
        const searchText = document.getElementById('search-text').value;
        window.location.href = "{{ url_for('sale.search_purchase_orders') }}?search=" + searchText;
    }
</script>
{% endblock %}